<template>
  <div style="flex: 1;display: flex;flex-direction: column;">
    <a-card
      v-for="(groupItem, groupKey) in messageSetList"
      :title="getTitle(groupKey)"
      :bordered="false"
      style="width: 100%;"
      :style="{ order: getCardOrder(groupKey) }"
      :class="[getCardOrder(groupKey) !== 0 ? '_mt-24' : '']"
    >
      <div class="disFlxJS" v-for="(item, index) in groupItem" :class="[index ? '_mt-24' : '']">
        <div>
          <div class="disFlxAC">
            <span class="fz-16" style="color: #000;">{{ item.name }}</span>
            <a-button type="link" @click="handleOpenModal(item)" class="_ml-24">
              查看短信模板
            </a-button>
          </div>
          <div class="fz-14" style="color:#86909C ;">{{ item.description }}</div>
        </div>
        <a-switch :checked="item.enable === 1" @click="() => handleUpdate(item)" />
      </div>
    </a-card>
    <a-modal title="短信模板示例" v-model="visible" width="640px" :footer="null">
      <div class="disFlxAC flexCol ">
        <MessageTemplate :content="content"></MessageTemplate>
        <span class="_mt-24" color="#86909C">
          短信内容仅供参考，请以实际内容为准。 “{ }”用于表示变量，不会在实际短信中显示
        </span>
      </div>
    </a-modal>
  </div>
</template>
<script>
import MessageTemplate from '@/components/MessageTemplate/index'
import { messagesConfigList, setTemplateKeyEnable } from '@/api/operations/message'
export default {
  components: {
    MessageTemplate
  },
  data() {
    return {
      visible: false,
      content: '',
      messageSetList: {}
    }
  },
  created() {
    this.queryMessagesConfigList()
  },
  methods: {
    async queryMessagesConfigList() {
      const res = await messagesConfigList()
      // const map = new Map()
      // map.set('activity', res.data.activity)
      // map.set('member', res.data.member)
      // map.set('system', res.data.member)
      this.messageSetList = res.data
    },
    handleOpenModal(item) {
      this.visible = true
      this.content = item.smsZhContent
    },
    async handleUpdate(item) {
      try {
        item.enable = item.enable === 1 ? 0 : 1
        await setTemplateKeyEnable(item.templateKey, item.enable)
        this.$message.success(`${item.name}已${item.enable === 1 ? '开启' : '关闭'}`)
      } catch (error) {
        item.enable = item.enable === 1 ? 0 : 1
      }
    },
    getTitle(groupKey) {
      return {
        system: '管理员被动短信消息',
        member: '会员被动短信消息',
        bo: '供需被动短信消息',
        activity: '活动被动短信消息'
      }[groupKey]
    },
    getCardOrder(groupKey) {
      return {
        system: 2,
        member: 1,
        activity: 0
      }[groupKey]
    }
  }
}
</script>
